<template>
  <div class="pay">

    <div class="time">
      <p>支付剩余时间</p>
      <van-count-down :time="time" />
    </div>
    <p style="text-align: left; font-size: 0.5rem;height: 1rem;line-height: 1rem;padding: 0.2rem;">选择支付方式</p>
    <div class="content">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600775033831&di=54cf87f084934b3a58124caf631aa385&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F56%2F49%2F02%2F57341a880be8f.png"
            alt="" class="img1">
          <van-cell title="支付宝" clickable @click="radio = '1'">
            <template #right-icon>
              <van-radio name="1" icon-size="24px" checked-color="#07c160" />
            </template>
          </van-cell>
          <img
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600776692749&di=ed1356d05fef4f4e23141669aeff7751&imgtype=0&src=http%3A%2F%2Fp2.qhimgs4.com%2Ft0130a19ab50e993006.jpg"
            alt="" class="img2">
          <van-cell title="微信" clickable @click="radio = '2'">
            <template #right-icon>
              <van-radio name="2" icon-size="24px" checked-color="#07c160" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
    <van-button round type="info" size="large" @click="toOrder">确认支付</van-button>
    <van-dialog v-model="show">
      <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2118000332,1471525266&fm=26&gp=0.jpg"
        class="img3" />
      <div>{{message}}</div>
    </van-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Pay',
    data: function () {
      return {
        time: 15 * 60 * 1000,
        radio: '1',
        show: true,
        message: "暂不开放支付功能",
      }
    },
    methods: {
      toOrder(){
        this.$router.push({ name: 'order' });
      }
    },
    created() {
      this.$store.commit("changeTitle", "在线支付");
    },
  }
</script>

<style lang="less" scoped>
  .pay {
    height: 100%;
    background-color: rgb(240, 240, 240);
  }

  .time {
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    background-color: white;
  }

  .time p {
    width: 100%;
    font-size: .5rem;
    height: 1rem;
    margin-top: 0.5rem;
    text-align: center;
  }

  .van-count-down {
    font-size: 1.2rem;
    height: 1rem;
    margin-top: 0.5rem;
  }

  .content {
    height: 30%;
    background-color: white;
  }

  .van-cell {
    height: 1.3rem;
    font-size: 0.5rem;
    text-align: left;
    line-height: 1.3rem;
  }

  .van-button {
    height: 1rem;
    width: 90%;
    margin: 0.5rem;
    font-size: 0.5rem;
  }

  .img1 {
    position: absolute;
    bottom: 1.5rem;
    left: 0.2rem;
    z-index: 2;
    width: 0.8rem;
    height: 0.8rem;
  }

  .img2 {
    position: absolute;
    bottom: 0.2rem;
    left: 0.2rem;
    z-index: 2;
    width: 0.8rem;
    height: 0.8rem;
  }

  .van-cell__title {
    margin-left: 1rem;
  }

  .img3 {
    width: 100px;
    margin: 0.4rem;
  }

  .van-dialog {
    font-size: 0.4rem;
  }

  .van-button__text {
    font-size: 0.4rem;
  }
</style>